/* Dark Theme Component Styles - 变量定义在 variables.css */

/* 深色模式基础样式 */
.dark {
  background-color: var(--background-color);
  color: var(--text-color);
}

.dark .header {
  background: linear-gradient(135deg, #369870, #1a252f);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark .footer {
  background: #2d2d2d;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-color);
}

.dark .sidebar {
  background: var(--surface-color);
  border-right: 1px solid var(--border-color);
}

.dark .content {
  background: var(--surface-color);
}

/* 文档空间组件 */
.dark .document-space {
  background: var(--surface-color);
  border-bottom: 1px solid var(--border-color);
}

.dark .space-header {
  border-bottom: 1px solid var(--border-color);
}

.dark .space-header h3 {
  color: var(--primary-color);
}

.dark .space-selector {
  border-bottom: 1px solid var(--border-color);
}

.dark .space-select {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.dark .space-select:focus {
  border-color: var(--primary-color);
}

.dark .space-info {
  border-bottom: 1px solid var(--border-color);
}

.dark .space-details h4 {
  color: var(--text-color);
}

.dark .space-description {
  color: var(--text-secondary);
}

.dark .space-stats {
  color: var(--text-muted);
}

/* 文档列表组件 */
.dark .document-list {
  background: var(--surface-color);
}

.dark .list-header {
  border-bottom: 1px solid var(--border-color);
}

.dark .list-header h3 {
  color: var(--primary-color);
}

/* 旧的文档树样式保持兼容 */
.dark .document-tree {
  background: var(--surface-color);
}

.dark .tree-header {
  border-bottom: 1px solid var(--border-color);
}

.dark .search-bar {
  border-bottom: 1px solid var(--border-color);
}

.dark .search-input {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.dark .search-input:focus {
  border-color: var(--primary-color);
}

.dark .tree-footer {
  background: var(--background-color);
  border-top: 1px solid var(--border-color);
}

.dark .error-message {
  background: rgba(245, 108, 108, 0.1);
  border-bottom: 1px solid rgba(245, 108, 108, 0.3);
}

.dark .error-message p {
  color: var(--danger-color);
}

.dark .retry-btn {
  background: var(--danger-color);
}

/* 弹窗暗色主题 */
.dark .dialog {
  background: var(--surface-color);
  box-shadow: var(--shadow-heavy);
}

.dark .dialog-header {
  border-bottom: 1px solid var(--border-color);
}

.dark .dialog-header h3 {
  color: var(--text-color);
}

.dark .close-btn {
  color: var(--text-muted);
}

.dark .close-btn:hover {
  color: var(--text-secondary);
  background: var(--background-color);
}

.dark .form-group label {
  color: var(--text-color);
}

.dark .form-input {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.dark .form-input:focus {
  border-color: var(--primary-color);
}

.dark .form-input::placeholder {
  color: var(--text-muted);
}

.dark .cancel-btn {
  background: var(--background-color);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.dark .cancel-btn:hover {
  background: var(--border-color);
}

/* 文档树节点暗色主题 */
.dark .tree-node {
  color: var(--text-color);
}

.dark .tree-node:hover {
  background: rgba(66, 184, 131, 0.1);
}

.dark .tree-node.selected {
  background: rgba(66, 184, 131, 0.2);
  border-left-color: var(--primary-color);
}

.dark .node-content {
  color: var(--text-color);
}

.dark .node-actions button {
  color: var(--text-muted);
}

.dark .node-actions button:hover {
  color: var(--text-color);
}

/* 滚动条暗色主题 */
.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark ::-webkit-scrollbar-track {
  background: var(--background-color);
}

.dark ::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

/* 过渡动画已在 base.css 中定义 */

/* 确保深色模式下选择框箭头可见 */
.dark .form-select {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M6 8L0 2l1.41-1.41L6 5.17l4.59-4.58L12 2z" fill="%23b3b3b3"/></svg>');
}

/* 按钮组件深色主题 */
.dark .create-btn, 
.dark .refresh-btn,
.dark .create-doc-btn,
.dark .view-docs-btn {
  border: 1px solid var(--border-color);
}

.dark .create-btn:hover, 
.dark .refresh-btn:hover:not(:disabled),
.dark .create-doc-btn:hover,
.dark .view-docs-btn:hover {
  background: var(--primary-dark);
}

.dark .refresh-btn:disabled {
  opacity: 0.4;
  background: var(--background-color);
  color: var(--text-muted);
}

.dark .search-input {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.dark .search-input::placeholder {
  color: var(--text-muted);
}

/* 列表容器 */
.dark .tree-container {
  background: var(--surface-color);
}

.dark .list-footer {
  background: var(--background-color);
  border-top: 1px solid var(--border-color);
}

.dark .stats {
  color: var(--text-muted);
}

/* 空状态和加载状态 */
.dark .loading,
.dark .empty-state {
  color: var(--text-secondary);
}

/* 颜色输入框 */
.dark .color-input {
  border: 1px solid var(--border-color);
  background: var(--background-color);
}

/* Detail 组件 */
.dark .document-detail {
  background: var(--surface-color);
  color: var(--text-color);
}

.dark .no-document .placeholder {
  color: var(--text-secondary);
}

/* Detail 组件文档标题深色主题 - 提高权重 */
.dark .document-detail .document-title,
.dark .detail-header .document-title {
  color: var(--text-color) !important;
}

.dark .document-title-input {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.dark .document-title-input:focus {
  border-color: var(--primary-color);
}

.dark .action-btn {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.dark .action-btn:hover {
  background: var(--border-color);
}

.dark .content-editor {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.dark .content-editor:focus {
  border-color: var(--primary-color);
}

.dark .raw-content {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

/* 文档子项 */
.dark .items-section {
  background: var(--surface-color);
}

.dark .item-card {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.dark .item-title {
  color: var(--text-color);
}

.dark .item-content {
  color: var(--text-secondary);
}

.dark .item-meta {
  color: var(--text-muted);
}

.dark .meta-info {
  color: var(--text-muted);
}

/* 视图切换按钮 */
.dark .view-toggle {
  background: var(--background-color);
  border: 1px solid var(--border-color);
}

.dark .view-toggle button {
  color: var(--text-secondary);
  background: transparent;
}

.dark .view-toggle button.active {
  background: var(--primary-color);
  color: white;
}

/* 弹窗相关样式（已存在，但确保完整） */
.dark .dialog {
  background: var(--surface-color);
  color: var(--text-color);
}

.dark .form-input,
.dark .form-textarea,
.dark .form-select {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.dark .form-input:focus,
.dark .form-textarea:focus,
.dark .form-select:focus {
  border-color: var(--primary-color);
}

.dark .submit-btn {
  background: var(--primary-color);
  color: white;
  border: none;
}

/* Element Plus Select 深色主题 */
.dark .el-select {
  --el-select-input-color: var(--text-color);
  --el-select-input-focus-border-color: var(--primary-color);
  --el-select-input-border-color: var(--border-color);
}

.dark .el-select .el-input__inner {
  background: var(--background-color);
  border-color: var(--border-color);
  color: var(--text-color);
}

.dark .el-select .el-input__inner:focus {
  border-color: var(--primary-color);
}

/* 空间选项样式深色主题 */
.dark .space-option {
  color: var(--text-color);
}

.dark .space-name {
  color: var(--text-color);
}

.dark .space-desc {
  color: var(--text-secondary);
}

.dark .space-count {
  background: var(--background-color);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

/* Element Plus 下拉菜单深色主题 */
.dark .el-select-dropdown {
  background: var(--surface-color);
  border-color: var(--border-color);
}

.dark .el-option {
  color: var(--text-color);
  background: var(--surface-color);
}

.dark .el-option:hover {
  background: var(--background-color);
}

.dark .el-option.is-selected {
  color: var(--primary-color);
  background: rgba(66, 184, 131, 0.1);
}

.dark .el-select .el-input.is-focus .el-input__inner {
  border-color: var(--primary-color);
}

/* Element Plus Dropdown 组件深色主题 */
.dark .el-dropdown-menu {
  background: var(--surface-color);
  border-color: var(--border-color);
}

.dark .el-dropdown-menu__item {
  color: var(--text-color);
}

.dark .el-dropdown-menu__item:not(.is-disabled):hover {
  background: var(--background-color);
  color: var(--text-color);
}

.dark .el-dropdown-menu__item.is-active {
  background: rgba(66, 184, 131, 0.1);
  color: var(--primary-color);
}

/* Element Plus Button 深色主题（用于下拉按钮） */
.dark .el-button {
  background: var(--surface-color);
  border-color: var(--border-color);
  color: var(--text-color);
}

.dark .el-button:hover:not(.is-disabled) {
  border-color: var(--primary-color);
  color: var(--text-color);
}

.dark .el-button:focus:not(.is-disabled) {
  border-color: var(--primary-color);
  color: var(--text-color);
}

/* DocumentTree 组件特定深色主题 */
.dark .document-space {
  background: var(--surface-color);
  border-bottom-color: var(--border-color);
}

.dark .space-selector {
  border-bottom-color: var(--border-color);
}

.dark .space-dropdown-button {
  background: var(--surface-color);
  border-color: var(--border-color);
  color: var(--text-color);
}

.dark .space-dropdown-button:hover,
.dark .space-dropdown-button:focus {
  border-color: var(--primary-color);
  background: var(--surface-color);
  color: var(--text-color);
}

.dark .current-space {
  color: var(--text-color);
}

.dark .placeholder {
  color: var(--text-muted);
}

.dark .dropdown-icon {
  color: var(--text-muted);
}

.dark .space-name {
  color: var(--text-color);
}

.dark .space-desc {
  color: var(--text-secondary);
}

.dark .space-count {
  background: var(--background-color);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.dark .create-space-btn {
  background: var(--primary-color);
  color: white;
  border: none;
}

.dark .create-space-btn:hover {
  background: var(--primary-dark);
}

/* Navigation 页面深色主题样式 */
.dark .category-title {
  color: #e6e6e6 !important;
}

.dark .category-description {
  color: #b3b3b3 !important;
}

.dark .sub-category-card {
  background: #2d2d2d !important;
  border: 1px solid #3d3d3d !important;
}

.dark .sub-category-card:hover {
  background: #333333 !important;
  border-color: #42b883 !important;
}

.dark .sub-category-title {
  color: #e6e6e6 !important;
}

.dark .sub-category-description {
  color: #b3b3b3 !important;
}

.dark .app-card:hover .app-name {
  color: #8b9aff !important;
}

.dark .app-icon {
  background: linear-gradient(145deg, #2d3748, #1a202c);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

.dark .app-icon[data-category-index="0"]:not(.text-icon) {
  background: linear-gradient(145deg, #4c51bf, #553c9a);
}

.dark .app-icon[data-category-index="1"]:not(.text-icon) {
  background: linear-gradient(145deg, #e53e3e, #c53030);
}

.dark .app-icon[data-category-index="2"]:not(.text-icon) {
  background: linear-gradient(145deg, #38b2ac, #2c7a7b);
}

.dark .app-icon[data-category-index="3"]:not(.text-icon) {
  background: linear-gradient(145deg, #3182ce, #2b6cb0);
}

.dark .app-icon[data-category-index="4"]:not(.text-icon) {
  background: linear-gradient(145deg, #d53f8c, #b83280);
}

.dark .app-icon[data-category-index="5"]:not(.text-icon) {
  background: linear-gradient(145deg, #d69e2e, #b7791f);
}

.dark .app-name {
  color: #e6e6e6 !important;
}

.dark .menu-trigger {
  color: #b3b3b3;
}

.dark .menu-trigger:hover {
  background: #3d3d3d;
  color: #e6e6e6;
}

.dark .dropdown-menu {
  background: #3d3d3d;
  border-color: #4a4a4a;
}

.dark .menu-item {
  color: #e6e6e6;
}

.dark .menu-item:hover {
  background: #4a4a4a;
}

.dark .menu-item.delete:hover {
  background: #5a3333;
}

.dark .random-icon-btn, .dark .icon-dropdown-btn {
  background: #3d3d3d;
  border-color: #4a4a4a;
  color: #e6e6e6;
}

.dark .random-icon-btn:hover, .dark .icon-dropdown-btn:hover {
  background: #4a4a4a;
  border-color: #667eea;
}

.dark .icon-selector {
  background: #3d3d3d;
  border-color: #4a4a4a;
}

.dark .icon-selector-title {
  color: #e6e6e6;
}

.dark .icon-category h5 {
  color: #b3b3b3;
  border-bottom-color: #4a4a4a;
}

.dark .icon-btn {
  background: #2d2d2d;
  border-color: #4a4a4a;
  color: #e6e6e6;
}

.dark .icon-btn:hover {
  border-color: #667eea;
  background: #2d2d3d;
}

.dark .icon-btn.active {
  border-color: #667eea;
  background: #667eea;
  color: white;
}

.dark .svg-input-section {
  background: #3d3d3d;
  border-color: #4a4a4a;
}

.dark .svg-input-title {
  color: #e6e6e6;
}

.dark .svg-textarea {
  background: #2d2d2d;
  border-color: #4a4a4a;
  color: #e6e6e6;
}

.dark .svg-textarea:focus {
  border-color: #667eea;
}

.dark .svg-preview {
  background: #2d2d2d;
  border-color: #4a4a4a;
}

.dark .svg-preview-label {
  color: #b3b3b3;
}

.dark .icon-tip {
  color: #b3b3b3;
}

.dark .icon-link {
  color: #8b9aff;
}

.dark .icon-link:hover {
  background: rgba(139, 154, 255, 0.1);
  color: #a0b1ff;
}

.dark .app-icon.svg-icon {
  border: none;
}

/* Navigation Header Controls 深色主题 */
.dark .nav-controls {
  background: transparent;
}

.dark .control-label {
  color: #cccccc;
}

.dark .columns-selector {
  background: #404040;
  border-color: #555555;
  color: #cccccc;
}

.dark .columns-selector:hover {
  background: #4a4a4a;
  border-color: #007acc;
}

.dark .columns-selector:focus {
  border-color: #007acc;
  background: #4a4a4a;
}

.dark .columns-selector option {
  background: #404040;
  color: #cccccc;
}

.dark .create-btn {
  background: #007acc;
  border-color: #007acc;
  color: #ffffff;
}

.dark .create-btn:hover {
  background: #0088dd;
  border-color: #0088dd;
}

.dark .create-btn:active {
  background: #006bb3;
  border-color: #006bb3;
}